
//线朝向
import axios from "axios";
import {rgba} from "mockjs";

let CONNECTOR = {
    LEFT: 1,
    UP: 2,
    RIGHT: 3,
    DOWN: 4
}

//箭头朝向
let DIRECTION = {
    LEFT: 1,
    UP: 2,
    RIGHT: 3,
    DOWN: 4
}

//框形状
let SHAPE = {
    RECTANGULAR: 0,
    DIAMOND: 1,
    ELLIPSE: 2,
}

//状态
const STATUS = {
    TRUE: {
        color: "#42b983" //green

    },
    FALSE: {
        color: "red"
    },
    STOP: {
        color: "#FFFF00" //yellow

    },
    DEFAULT: {
        color: "#D9D9D9" //gray
    }
}

let globalSettins = {
    fontSize: 16, //字号，具体使用数字还是字符串可根据程序更改
    lineWordCount: 10, //单行字数
    lineSpace: 5, //文字行间距
    lineWidth: 0.8, //线宽
    whiteSpace: 25, //框内留白
    rowSpace: 60, //框行间距，单位px
    columnSpace: 60, //框列间距，单位px
    font: "16px 微软雅黑" //字体配置
};
// 节点和连线
let nodes = []; //nodes里存放的就是各个myNode对象
let edges = []; //edges里存放的就是各个myEdges对象
let currentNodeId = 0;
let varMap = [];
let nodeElemChange = -1;

let defaultConfig = {
    text: {
        content: "", //框内文字或者线上文字的默认值为空
        align: "left", //左对齐
        fontSize: globalSettins.fontSize, //字体大小
        color: "black" //字颜色
    },
    lineWidth: globalSettins.lineWidth, //线宽
    color: "blue", //框颜色
    status: STATUS.DEFAULT //框状态
}

function myNode(id, x, y, w, h, tw, th, type = SHEAP.RECTANGULAR, varName = null, config = defaultConfig) {
    this.id = parseInt(id);
    this.x = parseInt(x);
    this.y = parseInt(y);
    this.w = parseInt(w);
    this.h = parseInt(h);
    this.tw = parseInt(tw);
    this.th = parseInt(th);

    this.connector_left = null;
    this.connector_up = null;
    this.connector_right = null;
    this.connector_down = null;
    this.nextNodes =  [];

    this.type = parseInt(type); //0:矩形 1:钻石型 2: 带圆弧矩形


    this.varName = varName;
    this.status = 0;
    this.config = config;
    this.backgroundColor = this.config.status.color;
    //this.draw(type);
    //this.drawText(config);
    nodes.push(this);
}


function myEdge(start_x, start_y, end_x, end_y, startConnector, endConnector, config = defaultConfig) {
    this.startConnector = startConnector;
    this.endConnector = endConnector;
    this.start_x = start_x;
    this.start_y = start_y;
    this.end_x = end_x;
    this.end_y = end_y;
    this.arrow_direction = this.startConnector - this.endConnector;

    this.config = config;

    edges.push(this);
}

myEdge.prototype.draw = function(ctx) {
    if (this.arrow_direction % 2 === 0) {
        this.draw_parallel(ctx);
    } else {
        this.draw_vertical(ctx);
    }
}

myEdge.prototype.draw_vertical = function(ctx) {
    let middlePoint = {
        x: 0,
        y: 0
    };

    if (!(this.startConnector % 2)) {
        middlePoint.x = this.start_x;
        middlePoint.y = this.end_y;
    } else {
        middlePoint.x = this.end_x;
        middlePoint.y = this.start_y;
    }
    ctx.beginPath();
    ctx.lineWidth = this.config.lineWidth;
    ctx.strokeStyle = "#F6AB6C";
    /*ctx.strokeStyle = this.config.color;*/

    ctx.moveTo(this.start_x, this.start_y);
    ctx.lineTo(middlePoint.x, middlePoint.y);
    ctx.lineTo(this.end_x, this.end_y);

    ctx.stroke();
    this.drawText(ctx, this.start_x, this.start_y, middlePoint.x, middlePoint.y);
    drawArrow(ctx, middlePoint.x, middlePoint.y, this.end_x, this.end_y, 30, 10, this.config.lineWidth, this.config.color);
}

myEdge.prototype.draw_parallel = function(ctx) {
    let m = 30; // 外边距
    let preMiddlePoint = {
        x: 0,
        y: 0
    };
    let middlePoint = {
        x: 0,
        y: 0
    };
    if (this.arrow_direction !== 0 && ((this.start_y === this.end_y && this.start_x !== this.end_x) || (this.start_x === this.end_x && this.start_y !== this.end_y))) {
        ctx.beginPath();
        ctx.lineWidth = this.config.lineWidth;
        ctx.strokeStyle = "#F6AB6C";
        /*ctx.strokeStyle = this.config.color;*/
        ctx.moveTo(this.start_x, this.start_y);
        ctx.lineTo(this.end_x, this.end_y);

        ctx.stroke();
        this.drawText(ctx, this.start_x, this.start_y, this.end_x, this.end_y);
        drawArrow(ctx, this.start_x, this.start_y, this.end_x, this.end_y, 30, 10, this.config.lineWidth, this.config.color);
    } else {
        if (this.startConnector === 2 || this.startConnector === 4) {
            preMiddlePoint.x = this.start_x;
            preMiddlePoint.y = this.end_y + (this.endConnector - 3) * m / 2;
            middlePoint.x = this.end_x;
            middlePoint.y = preMiddlePoint.y;
        } else {
            preMiddlePoint.x = this.end_x + (this.endConnector - 2) * m / 2;
            preMiddlePoint.y = this.start_y;
            middlePoint.x = preMiddlePoint.x;
            middlePoint.y = this.end_y;
        }
        ctx.beginPath();
        ctx.lineWidth = this.config.lineWidth;
        ctx.strokeStyle = "#F6AB6C";
        /*ctx.strokeStyle = this.config.color;*/

        ctx.moveTo(this.start_x, this.start_y);
        ctx.lineTo(preMiddlePoint.x, preMiddlePoint.y);
        ctx.lineTo(middlePoint.x, middlePoint.y);
        ctx.lineTo(this.end_x, this.end_y);

        ctx.stroke();
        this.drawText(ctx, preMiddlePoint.x, preMiddlePoint.y, middlePoint.x, middlePoint.y);
        drawArrow(ctx, middlePoint.x, middlePoint.y, this.end_x, this.end_y, 30, 10, this.config.lineWidth, this.config.color);
    }
}

//线上的文字
myEdge.prototype.drawText = function(ctx, start_x, start_y, end_x, end_y) {
    let str = this.config.text.content; //文本内容
    let lineWordCount = globalSettins.lineWordCount; //一行最多字数
    let startOffsetY = start_y + (end_y - start_y)/4; //线上文字放在靠近出口处
    let startOffsetX = start_x + (end_x - start_x)/4;
    let fontSize = this.config.text.fontSize; //字体size
    let lineSpace = globalSettins.lineSpace; //文本行间距

    if (str == null)
        return;

    if (start_x != end_x && start_y != end_y){
        startOffsetX = start_x - fontSize;
    }else if (start_x != end_x && start_y == end_y){
        startOffsetY -= fontSize;
    }else if (start_x == end_x && start_y != end_y){
        startOffsetX -= fontSize;
    }

    //文本从上开始
    ctx.textBaseline = "top";
    //字体
    ctx.font = globalSettins.font;
    //文字颜色
    ctx.fillStyle = this.config.text.color;
    //文字居中
    ctx.textAlign = "center";

    //如果不用换行
    if (str.length <= lineWordCount) {
        ctx.fillText(str, startOffsetX, startOffsetY);
    }
    //换行
    else {
        let xoffset = startOffsetX; //文字起始位置
        let yoffset = startOffsetY; //文字起始位置
        for (let i = 0; i < str.length; i += lineWordCount) {
            let str_start = i;
            let str_end = i + lineWordCount;
            if (str_end > str.length) {
                str_end = str.length;
            }
            //截取子串
            ctx.fillText(str.slice(str_start, str_end), xoffset, yoffset);
            //换行，y 加上行间距和字体大小
            yoffset += lineSpace + fontSize;
        }
    }

    ctx.stroke();
}

function drawArrow(ctx, fromX, fromY, toX, toY, theta, headlen, width, color) {

    theta = typeof(theta) != 'undefined' ? theta : 30;
    headlen = typeof(headlen) != 'undefined' ? headlen : 10;
    width = typeof(width) != 'undefined' ? width : 1;
    color = "#B1B1B7";
    /*color = typeof(color) != 'color' ? color : '#000';*/

    // 计算各角度和对应的P3,P4坐标
    let angle = Math.atan2(fromY - toY, fromX - toX) * 180 / Math.PI,
        angle1 = (angle + theta) * Math.PI / 180,
        angle2 = (angle - theta) * Math.PI / 180,
        topX = headlen * Math.cos(angle1),
        topY = headlen * Math.sin(angle1),
        botX = headlen * Math.cos(angle2),
        botY = headlen * Math.sin(angle2);

    ctx.save();
    ctx.beginPath();

    let arrowX = fromX - topX,
        arrowY = fromY - topY;

    ctx.moveTo(arrowX, arrowY);
    arrowX = toX + topX;
    arrowY = toY + topY;
    ctx.moveTo(arrowX, arrowY);
    ctx.lineTo(toX, toY);
    arrowX = toX + botX;
    arrowY = toY + botY;
    ctx.lineTo(arrowX, arrowY);
    ctx.strokeStyle = color;
    ctx.lineWidth = width;
    ctx.stroke();
    ctx.restore();
}

myNode.prototype.draw = function(ctx) {

    //根据节点状态，生成不同背景色
    if (this.config.status == STATUS.STOP) {
        if (this.status == 0) {
            this.backgroundColor = this.config.status.color;
            this.status = 1;
        } else {
            this.backgroundColor = "#f3f5f6";
            this.status = 0;
        }
    }

    switch (this.type) {
        case SHAPE.RECTANGULAR:
            this.drawRect(ctx);
            break;
        case SHAPE.DIAMOND:
            this.drawDiamond(ctx);
            break;
        case SHAPE.ELLIPSE:
            this.drawEnd(ctx);
            break;
        default:
            console.log("不支持的类型");
            break;
    }

};

myNode.prototype.drawText = function(ctx) {
    let strArr = [];
    let str = this.config.text.content; //框内文本内容
    let lineWordCount = globalSettins.lineWordCount; //一行最多字数
    let middleHight = (this.h - this.th) / 2;
    let startOffsetY = this.config.text.fontSize; //框内文本应与框间隔一个字符的宽度
    let startOffsetX = this.w / 2; /**文字在宽度居中**/
    let fontSize = this.config.text.fontSize; //字体size
    let lineSpace = globalSettins.lineSpace; //文本行间距

    //菱形需要移动h/4，保证文字在框内不越界
    if (this.type == SHAPE.DIAMOND) {
        startOffsetY += this.h / 4;
    }
    else{
        startOffsetY += middleHight;
    }

    //文本从上开始
    ctx.textBaseline = "top";
    //字体
    ctx.font = globalSettins.font;
    //文字颜色
    ctx.fillStyle = this.config.text.color;
    //文字居中
    ctx.textAlign = "center";

    //如果不用换行
    if (str.length <= lineWordCount) {
        ctx.fillText(str, this.x + startOffsetX, this.y + startOffsetY);
    }
    //换行
    else {
        let xoffset = this.x + startOffsetX; //文字起始位置
        let yoffset = this.y + startOffsetY; //文字起始位置
        for (let i = 0; i < str.length; i += lineWordCount) {
            let str_start = i;
            let str_end = i + lineWordCount;
            if (str_end > str.length) {
                str_end = str.length;
            }
            //截取子串
            ctx.fillText(str.slice(str_start, str_end), xoffset, yoffset);
            //换行，y 加上行间距和字体大小
            yoffset += lineSpace + fontSize;
        }
    }

    ctx.stroke();
}


myNode.prototype.drawRect = function(ctx) {
    ctx.beginPath();
    ctx.lineWidth = this.config.lineWidth;
    ctx.strokeStyle = this.config.color;
    ctx.rect(this.x, this.y, this.w, this.h);

    ctx.fillStyle = this.backgroundColor;
    ctx.fill();
    ctx.stroke();

    this.drawText(ctx);
}

myNode.prototype.drawDiamond = function(ctx) {

    let w = this.w;
    let h = this.h;

    var point_1_x = this.x;
    var point_1_y = this.y + h * 0.5;
    var point_2_x = this.x + w * 0.5;
    var point_2_y = this.y;
    var point_3_x = this.x + w;
    var point_3_y = this.y + h * 0.5;
    var point_4_x = this.x + w * 0.5;
    var point_4_y = this.y + h;

    ctx.beginPath();
    ctx.lineWidth = this.config.lineWidth;
    ctx.strokeStyle = this.config.color;
    ctx.moveTo(point_1_x, point_1_y);
    ctx.lineTo(point_2_x, point_2_y);
    ctx.lineTo(point_3_x, point_3_y);
    ctx.lineTo(point_4_x, point_4_y);
    ctx.lineTo(point_1_x, point_1_y);

    ctx.fillStyle = this.backgroundColor;
    ctx.fill();
    ctx.stroke();

    this.drawText(ctx);

}

myNode.prototype.drawEnd = function(ctx) {
    //找到内部矩形的四个点
    let delta_x = Math.sqrt(3) / 6 * this.h;
    let r = delta_x * 2;
    let point_1_x = this.x + delta_x;
    let point_1_y = this.y + this.h;
    let point_3_x = this.x + this.w - delta_x;
    let point_3_y = this.y;

    //打到两段圆弧的圆心
    let o_1_x = this.x + r;
    let o_1_y = this.y + this.h * 0.5;
    let o_2_x = this.x + this.w - r;
    let o_2_y = this.y + this.h * 0.5;

    ctx.beginPath();
    ctx.arc(o_1_x, o_1_y, r, 2 / 3 * Math.PI, 4 / 3 * Math.PI);
    ctx.lineTo(point_3_x, point_3_y);
    ctx.arc(o_2_x, o_2_y, r, 5 / 3 * Math.PI, 1 / 3 * Math.PI);
    ctx.lineTo(point_1_x, point_1_y);

    ctx.fillStyle = this.backgroundColor;
    ctx.fill();
    ctx.stroke();

    this.drawText(ctx);
}

function nodeConfig() {
    this.id = 0;
    this.row = 0;
    this.column = 0;
    this.type = 0;
    this.text = 0;
    this.connections = [{
        target: 1,
        startConnector: CONNECTOR.DOWN,
        endConnector: CONNECTOR.UP
    }, {
        target: 3,
        startConnector: CONNECTOR.RIGHT,
        endConnector: CONNECTOR.LEFT
    }]
}

/*
初始化
*/
function Init() {
    //1. 读取数据
    readDataFromFile();
}

/*从文件读取数据
file: 文件路径
功能：
1. 从配置文件读取数据,填充至配置数组
2. 填充过程中在columns数组中更新每列最大宽度
   在rows数组中更新每行最大高度
   例：
   rows = [100, 300]则说明第一行的最大高度为100，第二行最大高度300
*/
function readDataFromFile(file) {

    let columns = [];
    let rows = [];

    /*TODO
      循环读取配置文件里的每一行,即每个Node的配置，填充nodesConfig
      调用calNodeSize计算该Node所需要宽度和高度
    */

    // initData();
}


/*根据传入字符串的长度，及全局设置中的字体大小和单行长度计算
  Node的宽度和长度,并返回
*/
function calNodeSize(stringLen, type) {
    let h;
    let w;
    let whiteSpace = globalSettins.whiteSpace; //框内文字的留白区大小
    let fontSize = globalSettins.fontSize; //文字的大小
    let lineWordCount = globalSettins.lineWordCount; //一行最多字数
    let lineSpace = globalSettins.lineSpace; //文字的行间距

    // 字数小于lineWordCount
    if (stringLen <= lineWordCount) {
        w = stringLen * fontSize + whiteSpace;
        h = fontSize + whiteSpace;
    } else {
        // 字数大于lineWordCount ，需要换行
        w = lineWordCount * fontSize + whiteSpace;
        // 高度向上取整
        h = Math.ceil(stringLen / lineWordCount) * fontSize +
            Math.ceil(stringLen / lineWordCount - 1) * lineSpace +
            whiteSpace;
    }

    //菱形需要乘2，防止文字超出框外
    if (type == SHAPE.DIAMOND) {
        h *= 2;
        w *= 2;
    }

    return {
        height: h,
        width: w
    }
}

//点击事件的回调函数
function clickEvent(x, y){
    for (let id = 0; id < nodes.length; id++){
        let item = nodes[id];
        if (item.varName == null){
            //在框内
            if ((x >= item.x && x <= (item.x + item.w))&&
                (y >= item.y && y <= (item.y + item.h))){
                return {
                    nodeId : item.id,
                    content: item.config.text.content
                };
            }
        }
    }
    return {
        nodeId : -1,
        content: "非手动节点或非法节点"
    };
}

//转换为相对坐标
function getEventPosition(ev){
    let x, y;
    if (ev.layerX || ev.layerX == 0) {
        x = ev.layerX;
        y = ev.layerY;
    } else if (ev.offsetX || ev.offsetX == 0) { // Opera
        x = ev.offsetX;
        y = ev.offsetY;
    }
    return {x: x, y: y};
}

//获取点击的节点ID
function getClickNode(e) {
    let p = getEventPosition(e);
    //判断点击是否合法
    return clickEvent(p.x, p.y);
}

function initCanvas(canvasName, w = 1500, h = 2000) {
    let canvas = document.getElementById(canvasName);
    //画布size
    canvas.width = w;
    canvas.height = h;
    return canvas;
}

function findConnectorLocation(connector, columnLocations, rowLocations, maxWidthes, maxHeights, node) {
    let x = 0;
    let y = 0;
    switch (connector) {
        case 1:
            x = columnLocations[node.column];
            y = rowLocations[node.row] + maxHeights[node.row] / 2;
            return {
                x: x,
                y: y
            }
        case 2:
            x = columnLocations[node.column] + maxWidthes[node.column] / 2;
            y = rowLocations[node.row];
            return {
                x: x,
                y: y
            }
        case 3:
            x = columnLocations[node.column] + maxWidthes[node.column];
            y = rowLocations[node.row] + maxHeights[node.row] / 2;
            return {
                x: x,
                y: y
            }
        case 4:
            x = columnLocations[node.column] + maxWidthes[node.column] / 2;
            y = rowLocations[node.row] + maxHeights[node.row];
            return {
                x: x,
                y: y
            }
    }
}


function findNodeInfo(nodes, rowLocations, columnLocations, maxWidthes, maxHeights, nodeWidthes, nodeHeights) {
    let m = 30; // 外边距
    nodes.forEach(function(item) {
        while (rowLocations.length <= item.row) {
            rowLocations.push(0);
            nodeHeights.push(0);
        }
        while (columnLocations.length <= item.column) {
            columnLocations.push(0);
            nodeWidthes.push(0);
        }
        let size = calNodeSize(item.text.length, item.type);
        nodeWidthes[item.column] = size.width;
        nodeHeights[item.row] = size.height;
        if (rowLocations[item.row] < size.height) {
            rowLocations[item.row] = size.height;
        }
        if (columnLocations[item.column] < size.width) {
            columnLocations[item.column] = size.width;
        }
    });

    rowLocations.forEach(function(item) {
        maxHeights.push(item);
    });
    columnLocations.forEach(function(item) {
        maxWidthes.push(item);
    });

    let middleRow = rowLocations[0];
    let middleColumn = columnLocations[0];
    rowLocations[0] = m;
    columnLocations[0] = m;
    for (let i = 1; i < rowLocations.length; ++i) {
        let middleRow1 = rowLocations[i];
        rowLocations[i] = rowLocations[i - 1] + middleRow + m;
        middleRow = middleRow1;
    }
    for (let i = 1; i < columnLocations.length; ++i) {
        let middleColumn1 = columnLocations[i];
        columnLocations[i] = columnLocations[i - 1] + middleColumn + m;
        middleColumn = middleColumn1;
    }
}

/*
* 生成node和edges的config
* @param data: nodes或edges数据
*/
function makeConfig(data) {
    let config = JSON.parse(JSON.stringify(defaultConfig));
    if (data.text != null){
        config.text.content = data.text;
    }
    if (data.textColor != null && data.textColor != ""){
        config.text.color = data.textColor;
    }
    if (data.color != null){
        config.color = data.color;
    }
    if (data.status != null){
        config.status = Str2Config(data.status);
    }
    return config;
}

/*
* 生成nodes之间的连接关系
* @param nodeId 节点id
* @param target 指向节点id
*/
function addNodeRelation(nodeId, target, str) {
    let nextId = target;
    let next = {id: nextId, value: 0};

    if (str == "Y"){
        next.value = 1;
    }
    else if (str == "N"){
        next.value = 0;
    }else {
        next.value = -1;
    }

    nodes[nodeId].nextNodes.push(next);

}

/*
* 补充生成框内文字，分为自动操作和手动操作
* @param nodes 节点列表
*/
function supplementText(nodesData) {
    nodesData.forEach(function(item) {
        let opType = "";
        if (item.type != SHAPE.ELLIPSE){
            if (item.var == null){
                opType = "手动：";
            }else {
                opType = "自动：";
            }
        }
        item.text_content = opType + item.text_content;
    });
}

/*
* 更新画布元素
* @param data: 数据
* @param canvas: 画布(bom)对象
*/
function updateElements(nodesData, edgesData,canvas) {
    // 用于存放每行节点左上顶点的纵坐标
    let rowLocations = [];
    // 用于存放每列节点左上顶点的横坐标
    let columnLocations = [];
    // 用于存放每列最大宽度
    let maxWidthes = [];
    // 用于存放每行最大宽度
    let maxHeights = [];
    let nodeWidthes = [];
    let nodeHeights = [];

    //根据变量是否存在，补充文本中的自动： 手动：前缀
    // supplementText(nodesData);
    findNodeInfo(nodesData, rowLocations, columnLocations, maxWidthes, maxHeights, nodeWidthes, nodeHeights);

    let ctx = canvas.getContext("2d");

    //画布的宽度根据最后一个节点的坐标自适应
    canvas.width = columnLocations[columnLocations.length-1] + maxWidthes[maxWidthes.length-1] + 30;

    // ctx.translate(0,150);
    ctx.fillStyle = '#13192C';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    nodesData.forEach(function(item) {
        new myNode(item.nodeId,
                columnLocations[item.column],
                rowLocations[item.row],
                maxWidthes[item.column],
                maxHeights[item.row],
                nodeWidthes[item.column],
                nodeHeights[item.row],
                item.type,
                item.expression,
                makeConfig(item));
    });
    edgesData.forEach(function(item) {
        let startPoint = findConnectorLocation(item.startConnector,
                                            columnLocations,
                                            rowLocations,
                                            maxWidthes,
                                            maxHeights,
                                            nodesData[item.nodeId]);
        let endPoint = findConnectorLocation(item.endConnector,
                                            columnLocations,
                                            rowLocations,
                                            maxWidthes,
                                            maxHeights,
                                            nodesData[item.target]);
        new myEdge(startPoint.x,
                startPoint.y,
                endPoint.x,
                endPoint.y,
                item.startConnector,
                item.endConnector,
                makeConfig(item));

        addNodeRelation(item.nodeId, item.target, item.text);
    });
    //自动执行第一个开始节点
    // setStatus(nodes[currentNodeId], STATUS.STOP);
}

/*
* 绘制元素
* @param canvas: 画布对象
*/
function drawElements(canvas){
    let ctx = canvas.getContext("2d");
    nodes.forEach(function(item) {
        item.draw(ctx);
    });
    edges.forEach(function(item) {
        item.draw(ctx);
    });
}

//设置节点状态
function setStatus(item, status){
    item.config.status = status;
    item.backgroundColor = status.color;
    item.status = 0;
}

function Str2Config(str){
    switch (str){
        case 2 :
            return STATUS.TRUE;
        case 0 :
            return STATUS.DEFAULT;
        case 1 :
            return STATUS.STOP;
        default :
            return STATUS.DEFAULT;
    }
}


let prePosition = 0;


function clearDraw(){
    nodes = [];
    edges = [];
    varMap = [];
    prePosition = 0;
    currentNodeId = 0;
}

function getVarMapLine(){
    return varMap;
}

function getNowDate() {
    let date = new Date();
    let y = date.getFullYear();
    let m = date.getMonth() + 1;
    let d = date.getDate();
    let H = date.getHours();
    let mm = date.getMinutes();
    let s= date.getSeconds()
    m = m < 10 ? "0" + m : m;
    d = d < 10 ? "0" + d : d;
    H = H < 10 ? "0" + H : H;
    return y + "-" + m + "-" + d + " " + H + ":" + mm+":"+s;
}

function changeElemStatus (statusBook){

    if (currentNodeId >= nodes.length)
        return;

    let str = "";
    let item = nodes[currentNodeId];

    if (item.varName != null){
        if (nodeElemChange != currentNodeId){
            str = str + "自动操作：" + '<br/>';
        }

        item.nextNodes.forEach(function (e){
            if (e.value == statusBook[item.varName]){
                setStatus(item, STATUS.TRUE);
                setStatus(nodes[e.id], STATUS.STOP);
                currentNodeId = e.id;
                str = str + nodes[e.id].config.text.content + " ( id:" + currentNodeId +" )" + '<br/>';
            }
        });

        if (nodeElemChange != currentNodeId){
            str = str + "变量列表：" + '<br\>';
            for (let key in statusBook){
                str = str + key + ":" + statusBook[key] + ";" +'<br/>';
            }
            str = str + "时间: " + getNowDate();
            varMap.push(str);
            nodeElemChange = currentNodeId;
        }
    }else {
        if (nodeElemChange != currentNodeId){
            str = str + "手动操作：" + '<br/>';
            str = str + nodes[currentNodeId].config.text.content + " ( id:" + currentNodeId +" )" + '<br/>';
            str = str + "时间: " + getNowDate();
            varMap.push(str);
            nodeElemChange = currentNodeId;
        }
    }
}

export {
    initCanvas,
    updateElements,
    drawElements,
    clearDraw,
    changeElemStatus,
    getClickNode,
}
